<template>
	<div class="bg-light pb">
      <div class="container-title-special">商品图片<span class="font-red ml">( 请上传1-5张图片 )</span></div>
      <div class="pnl upload-list" v-if="isLook">
        <div :class="{'item':true, 'large': large}" v-for="(item, index) in uploadList" :key="index">
          <a v-if="item.imgUrl.indexOf('http') != -1" @click="previewImg(index)"><img :src="item.imgUrl + imgWidth"></a>
          <a v-else @click="previewImg(index)"><img :src="preFixPath + item.imgUrl + imgWidth"></a>
        </div>
      </div>
      <PictureEditItem :uploadList="uploadList" :maxlength="maxlength" @uploadPic="uploadPic" v-else></PictureEditItem>   
    </div>
</template>
<script>
import PictureEditItem from "~/PictureEditItem"
import { preFixPath } from "@/util"
export default {
  props: {
    isLook: {
      type: Boolean,
      default: false
    }
  },
  components: {
    PictureEditItem
  },
  data() {
    return {
      preFixPath,
      uploadList: [],
      maxlength: 5,
      idsArr:[],
      large: false
    };
  },
  methods: {
    uploadPic(val) {
      this.uploadList = []
      val.forEach((item, index) =>{
        item.sort = index
        this.uploadList.push(item);
      })
    },
    previewImg (idx) {
        let imgList = this.uploadList.map(item => {
            return item.imgUrl.indexOf('http') !== -1 ? item.imgUrl : this.preFixPath + item.imgUrl
        })
        this.$vueImgPreview({
            multiple: true, // 开启多图预览模式
            nowImgIndex: idx, // 多图预览，默认展示第二张图片
            imgList // 需要预览的多图数组
        })
    }
  },
  computed: {
    imgWidth() {
      if(this.large) {
        return '_220w'
      }
      return '_110w'
    },
  }
};
</script>